<template>
	<div class="w-full">
		<!-- 响应式的两部分总金额信息 -->
		<div class="grid grid-cols-1 md:grid-cols-2 gap-[10px]">
			<!-- 已领取总额 -->
			<div class="bg rounded-lg p-6 flex items-center justify-between bg-[#1B2538]">
				<div class="flex items-center gap-4">
					<!-- 图标容器 -->
					<div class="w-20 h-20 px-[9px] py-[14px] flex items-center justify-center rounded-md">
						<img
							src="@/assets/img/cash-claimed.svg"
							:alt="$t('agent.income.totalClaimed')"
							class="max-w-full max-h-full" />
					</div>
					<div>
						<div class="text-sm">{{ $t('agent.income.totalClaimed') }}</div>
						<div class="text-xl font-bold text-white mt-1 lg">
							US$
							<base-amount
								:currency="CurrencyFiatEnum.USD"
								:value="info.receivedAmountUsd"
								class="inline-block"
								hide-currency />
						</div>
					</div>
				</div>
			</div>
			<!-- 可领取总额 -->
			<div class="bg rounded-lg p-6 flex items-center justify-between bg-[#1B2538]">
				<div class="flex items-center gap-4">
					<!-- 图标容器 -->
					<div class="w-20 h-20 px-[9px] py-[14px] flex items-center justify-center rounded-md">
						<img
							src="@/assets/img/cash-claimable.svg"
							:alt="$t('agent.income.totalClaimable')"
							class="max-w-full max-h-full" />
					</div>
					<div>
						<div class="text-sm">{{ $t('agent.income.totalClaimable') }}</div>
						<div class="text-xl font-bold text-white mt-1 lg">
							US$
							<base-amount
								:currency="CurrencyFiatEnum.USD"
								:value="info.toBeReceivedAmountUsd"
								class="inline-block"
								hide-currency />
						</div>
					</div>
				</div>
				<base-button
					type="primary"
					class="bg-primary text-white rounded-full"
					style="width: 100px; height: 40px"
					:disabled="+info.toBeReceivedAmountUsd <= 0"
					:loading="claimLoading"
					@click="handleClaim">
					{{ $t('rewards.claim') }}
				</base-button>
			</div>
		</div>
		<!-- 表格部分 -->
		<up-table
			ref="el"
			:options="tableOptions"
			:data="info.list"
			idKey="userId"
			class="w-full mt-4"
			:isEmpty="info.list.length === 0"
			:loading="tableLoading">
			<template #currency="{ data }">
				<div class="flex items-center gap-1">
					<base-currency :currency="data.currency" />
					<div class="text-sm">{{ data.currency }}</div>
				</div>
			</template>
			<template #claimed="{ data }">
				<base-amount :currency="data.currency" :value="data.receivedAmount" />
			</template>
			<template #claimable="{ data }">
				<base-amount :currency="data.currency" :value="data.toBeReceivedAmount" />
			</template>
		</up-table>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { BaseButton, BaseCurrency, BaseAmount } from '@/components/base'
import { UpTable, TableOptions } from '@/components/up'
import { useProfileStore } from '@/store'
import { getCIncome, receiveAmount } from '@/api/agent'
// import { isDesktop } from '@/hooks'
import { formatNumber } from '@/utils/decimal'
import { useRequest } from '@/hooks'
import { CurrencyFiatEnum } from '@/enums'

// const platform = isDesktop ? 'pc' : 'h5'

const option: {
	type: 'fiat' | 'crypto' // 法币 or 加密货币
	platform: 'pc' | 'h5' // 平台
} = {
	platform: 'h5',
	type: 'fiat'
}

const profileStore = useProfileStore()
const userId = ref<number>()
const userInfo = ref(profileStore.userInfo)
if (userInfo.value) {
	userId.value = userInfo.value.id
}

const tableOptions = computed<TableOptions[]>(() => [
	{
		slot: 'currency',
		textT: 'agent.income.currency'
	},
	{
		slot: 'claimed',
		textT: 'agent.income.previouslyClaimed',
		align: 'right'
	},
	{
		slot: 'claimable',
		textT: 'agent.income.claimable',
		align: 'right'
	}
])

interface IncomeInfo {
	list: any[]
	receivedAmountUsd: string
	toBeReceivedAmountUsd: string
}

const info = ref<IncomeInfo>({
	list: [],
	receivedAmountUsd: '',
	toBeReceivedAmountUsd: ''
})

interface IncomeResponse {
	list: any[]
	receivedAmountUsd: number | string
	toBeReceivedAmountUsd: number | string
}

const tableLoading = ref(false)
const claimLoading = ref(false)

const { run: getIncome } = useRequest(
	() => {
		tableLoading.value = true
		return getCIncome({ userId: userId.value as number })
	},
	{
		showError: true,
		onSuccess: (res: IncomeResponse) => {
			console.log(res, 'res')
			info.value.list = res.list || []
			info.value.receivedAmountUsd = formatNumber(res.receivedAmountUsd || 0, option)
			info.value.toBeReceivedAmountUsd = formatNumber(res.toBeReceivedAmountUsd || 0, option)
		},
		onFinally: () => {
			tableLoading.value = false
		}
	}
)

const { run: handleClaim } = useRequest(
	() => {
		claimLoading.value = true
		return receiveAmount({ userId: userId.value as number })
	},
	{
		showError: true,
		showSuccess: true,
		onSuccess: () => {
			getIncome()
		},
		onFinally: () => {
			claimLoading.value = false
		}
	}
)

onMounted(() => {
	getIncome()
})
</script>
<style scoped>
.get-btn {
	width: 100px;
	height: 40px;
}
.bg {
	border-radius: 8px;
	background: var(--bg-11-b-2538, #1b2538);
}
.txt {
	color: var(--text-396-a-5-aa, #96a5aa);

	/* SF Pro Semibold 600/base */
	font-family: 'SF Pro Display';
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.035px;
}
</style>
